<template>
  <div class="playBack" @mouseleave="leaveBackPlay">
    <div style="cursor: pointer">
      <img v-show="!isPlay" src="@/assets/img/screen/icon_playStart.png" alt="" @click="setPlayOrPause" />
      <img v-show="isPlay" src="@/assets/img/screen/icon_playEnd.png" alt="" @click="setPlayOrPause" />
    </div>
    <div class="progressBar" ref="progressBar" @mousedown="processDown" @mousemove="progressMove" @mouseup="progressUp">
      <div class="progress" ref="progress"></div>
      <div class="line"></div>
      <div class="time">
        <div class="beginTime">
          <span>{{ sChangeTime(flyTime) }}</span>
        </div>
        <div class="endTime">
          <span>{{ endTime }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    packages: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      isPlay: true,
      playTimer: null,
      canMove: false,
      onePx: 0,
      initProcessWidth: 5,
      allprocessLength: 0,
      precent: 0,
      flyTime: 0,
      allTimeS: '',
    };
  },
  computed: {
    endTime() {
      // 计算分钟。
      // 算法：将秒数除以60，然后下舍入，既得到分钟数
      const data = this.packages;
      const commonData = this.packages;
      if (data && data.length !== 0) {
        const sData =
          (Number(new Date(data[data.length - 1].created_at)) - Number(new Date(data[0].created_at))) / 1000;
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.allTimeS = Math.ceil(sData);
        const time = this.sChangeTime(this.allTimeS);
        return time;
      }
      if (commonData && commonData.length > 0) {
        const sData = Number(commonData[0].create_time) - Number(commonData[commonData.length - 1].create_time);
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.allTimeS = Math.ceil(sData);
        const time = this.sChangeTime(this.allTimeS);
        return time;
      }
      return '00:00';
    },
  },
  mounted() {
    // this.setPlayOrPause();
    this.$emit('openBackPlay', this.allTimeS);
    setTimeout(() => {
      const processLength = this.$refs.progressBar.clientWidth - 5;
      this.allprocessLength = processLength;
      this.onePx = this.allprocessLength / this.allTimeS;
    }, 1000);
    this.setFlyTime();
  },
  methods: {
    setFlyTime() {
      this.playTimer = setInterval(() => {
        if (this.flyTime < this.allTimeS) {
          this.flyTime++;
          const process = this.$refs.progress;
          const nowWidth = this.initProcessWidth + this.onePx;
          this.initProcessWidth = nowWidth;
          process.style.width = nowWidth + 'px';
        } else {
          clearInterval(this.playTimer);
          this.isPlay = false;
        }
      }, 1000);
    },
    setPlayOrPause() {
      this.isPlay = !this.isPlay;
      if (this.isPlay) {
        this.$emit('openBackPlay');
        this.setFlyTime();
      } else {
        this.$emit('pause');
        clearInterval(this.playTimer);
      }
    },
    processDown(e) {
      this.canMove = true;
      this.isPlay = false;
      const {progress} = this.$refs;
      progress.style.width = e.layerX + 'px';
      this.initProcessWidth = e.layerX;
      this.precent = this.initProcessWidth / this.allprocessLength;
      this.isPlay = true;
      clearInterval(this.playTimer);
    },
    progressMove(e) {
      if (this.canMove) {
        const {progress} = this.$refs;
        progress.style.width = e.layerX + 'px';
        this.initProcessWidth = e.layerX;
        this.precent = this.initProcessWidth / this.allprocessLength;
      }
    },
    leaveBackPlay(e) {
      if (this.canMove) {
        this.progressUp();
      }
    },
    progressUp() {
      this.canMove = false;
      this.isPlay = true;
      if (this.precent <= 1) {
        this.flyTime = Math.ceil(this.allTimeS * this.precent);
        this.$emit('moveProgress', this.precent, this.flyTime);
        this.setFlyTime();
      } else {
        this.isPlay = false;
      }
    },
    /**
     * 秒转为时间
     */
    sChangeTime(s) {
      let h;
      h = Math.floor(s / 60);
      // 计算秒
      // 算法：取得秒%60的余数，既得到秒数
      s %= 60;
      // 将变量转换为字符串
      h += '';
      s += '';
      // 如果只有一位数，前面增加一个0
      h = h.length === 1 ? '0' + h : h;
      s = s.length === 1 ? '0' + s : s;
      return h + ':' + s;
    },
    initData() {
      this.initProcessWidth = 5;
      this.$refs.progress.style.width = '5px';
      this.flyTime = 0;
      clearInterval(this.playTimer);
      setTimeout(() => {
        const processLength = this.$refs.progressBar.clientWidth - 5;
        this.allprocessLength = processLength;
        this.onePx = this.allprocessLength / this.allTimeS;
      }, 1000);
      this.setFlyTime();
    },
  },
  unmounted() {
    clearInterval(this.playTimer);
  },
  filters: {
    /**
     * 秒转为时间
     */
    sChangeTime(s) {
      let h;
      h = Math.floor(s / 60);
      // 计算秒
      // 算法：取得秒%60的余数，既得到秒数
      s %= 60;
      // 将变量转换为字符串
      h += '';
      s += '';
      // 如果只有一位数，前面增加一个0
      h = h.length === 1 ? '0' + h : h;
      s = s.length === 1 ? '0' + s : s;
      return h + ':' + s;
    },
  },
};
</script>
<style lang="scss" scoped>
.playBack {
  width: 440px;
  height: 50px;
  background: rgba(3, 13, 28, 0.8);
  border-radius: 4px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: #fff;
  position: absolute;
  top: 280px;
  right: 80px;
  padding-right: 15px;

  .progressBar {
    width: 352px;
    height: 100%;
    position: relative;
    cursor: pointer;
    .progress {
      width: 5px;
      height: 8px;
      position: absolute;
      top: 38%;
      transform: translateY(-50%);
      background: linear-gradient(90deg, #88d4fd 0%, #18f9b1 100%);
    }

    .line {
      height: 3px;
      width: 100%;
      margin-top: 16px;
      background-color: #4059b3;
    }
    .time {
      display: flex;
      position: absolute;
      bottom: 5px;
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>
